<template>
    <div id="articles">
        <el-input
                v-model="queryParams.titleOrContent"
                placeholder="请输入关键词搜索"
                style="width: 300px;margin-bottom: 20px">
            <el-button slot="append" icon="el-icon-search" @click="getData" circle></el-button>
        </el-input>
        <el-collapse v-for="(item, index) in articleData" :key="index" accordion>
            <el-collapse-item :title="item.title">
                <time class="time video-createtime">{{ item.createTime|timestampToTime }}</time>
                <div v-html="item.content">
                </div>
            </el-collapse-item>
        </el-collapse>
        <el-divider v-if="articleData.length == 0">暂无公告</el-divider>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="pageCallFather"></Pagination>
    </div>
</template>

<script>
    import Pagination from "@/components/Pagination";
    import {selectArticle} from "@/api/adminFun";
    import {Loading, Message, MessageBox} from 'element-ui';

    export default {
        name: "articles",
        components:{
            Pagination
        },
        data(){
            return{
                queryParams: {
                    pageIndex: 0,
                    pageSize: 20,
                    titleOrContent: ''
                },
                pageparm: {
                    currentPage: 1,
                    pageSize: 20,
                    total: 0
                },
                articleData: [],
            }
        },
        created() {
            this.getData();
        },
        methods:{
            getData(){
                selectArticle(this.queryParams).then(res=>{
                    if (res.status == 200){
                        this.articleData = res.data.data;
                        this.pageparm.total = res.data.totalCount;
                    }else {
                        Message.error(res.message);
                    }
                })
            },
            // 分页插件事件
            pageCallFather(param) {
                this.queryParams.pageIndex = param.currentPage - 1;
                this.queryParams.pageSize = param.pageSize;
                this.getData();
            },
        }
    }
</script>

<style>
    #articles{
        margin: 30px 0px;
    }
    #articles .el-tabs__item{
        color: white;
    }
    #articles .el-tabs__item.is-active {
        color: #f3cd20;
    }
    #articles .el-tabs__active-bar {
        background-color: #f3cd20;
    }

    #articles .el-collapse-item__header{
        font-size: large;
        color: white;
        background-color: #272727;
    }
    #articles .el-collapse-item__wrap{
        background-color: #272727;
    }
    #articles .el-collapse-item__content{
        font-size: medium;
        color: white;
    }

    #articles .el-input__inner{
        color: white;
        background: rgba(0, 0, 0, 0);
    }

    #articles .el-divider__text{
        background-color: #272727;
        color: white;
    }
</style>
